<template>
  <div class="container">
    <div style="padding: 10px 20px;">
      <NormalMaterial :currentTab="currentTab" :tabList="tabList" :formList="formList" :queryForm="queryForm" pagePwd="File" @tabClick="tabClick" @handleQuery="handleQuery" @handleReset="handleReset">
        <template slot="one">
          <el-table v-loading="loading" :data="companyTableList" style="width: 100%" height="400"
            :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
            <el-table-column align="center" label="标签" :width="200">
              <template slot-scope="scope">
                <tagGroupShowTable :tagGroup="scope.row.weGroupTagVOS" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="文件名" prop="fileName" show-overflow-tooltip :width="200">
              <template slot-scope="scope">
                <div v-hasPermi="['admin:detail:fileListQuery']" class="text-color" @click="checkDetail(scope, 0)">
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="下载次数" prop="sumDownloadByCount" min-width="100">
              <template slot-scope="scope">
                {{ `${scope.row.downloadCount || 0}` }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="发送总次数" prop="sendCount" min-width="120">
              <template slot-scope="scope">
                {{ `${scope.row.sendCount || 0}` }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建人" prop="createByName" min-width="120">
              <template slot-scope="scope">
                <div class="text-color">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="createTime" :width="200"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" :width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="shareFile(scope.row)">分享
                </el-button>
                <el-button v-hasPermi="['wecom:material:edit:corp']" type="text" @click="updateTrick(scope, 0)">编辑
                </el-button>
                <el-button v-hasPermi="['wecom:material:delete:corp']" type="text" @click="deleteTrick(scope)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="companyPageNum" :pageSize="companyPageSize" :total="companyTotal"
            @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
        <template slot="two">
          <div style="text-align: right; padding: 20px 0; border-top: 1px solid #eee;">
            <el-button icon="el-icon-plus" type="primary" @click="addTrick()" v-hasPermi="['admin:detail:fileCreateOrUpdate']">上传文件</el-button>
          </div>
          <el-table v-loading="loading" :data="selfTableList" style="width: 100%" height="400"
            :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
            <el-table-column align="center" label="标签" :width="200">
              <template slot-scope="scope">
                <tagGroupShowTable :tagGroup="scope.row.weGroupTagVOS" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="文件名" prop="fileName" show-overflow-tooltip :width="200">
              <template slot-scope="scope">
                <div v-hasPermi="['admin:detail:fileListQuery']" class="text-color"
                  @click="checkDetail(scope, 1)">
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="下载次数" prop="sumDownloadByCount" min-width="100">
              <template slot-scope="scope">
                {{
                  `${scope.row.downloadCount || 0}`
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="发送总次数" prop="sendCount" min-width="120">
              <template slot-scope="scope">
                {{
                  `${scope.row.sendCount || 0}`
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建人" prop="createByName" min-width="120">
              <template slot-scope="scope">
                <div class="text-color">{{ scope.row.createByName }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="createTime" :width="200"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" :width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="shareFile(scope.row)">分享</el-button>
                <el-button v-hasPermi="['wecom:material:edit']" type="text" @click="updateTrick(scope, 1)">编辑</el-button>
                <el-button v-hasPermi="['wecom:material:delete']" type="text" @click="deleteTrick(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="selfPageNum" :pageSize="selfPageSize" :total="selfTotal"
            @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
          </NormalPagination>
        </template>
      </NormalMaterial>
    </div>
  </div>
</template>

<script>
import { deleteFile, deleteFileCorp, queryFileList } from '../../../../api/communityOperating/fileManage.js'

export default {
  data() {
    return {
      tabList: [
        { label: '企业文件夹', vlaue: '0', slotName: 'one' },
        { label: '我上传的文件', vlaue: '1', slotName: 'two' },
      ],
      queryForm: {
        fileName: '',
        deptId: null,
        createBy: null,
      },
      companyForm: {
        fileName: '',
        deptId: null,
        createBy: null,
      },
      selfForm: {
        fileName: '',
        deptId: null,
        createBy: null,
      },
      formList: [
        {
          label: '文件名称',
          value: '',
          prop: 'fileName',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: '',
        },
        {
          label: '创建人',
          value: '',
          prop: 'createBy',
          type: 'STAFF',
          emunName: '',
        },
      ],
      currentTab: '0',
      loading: false,
      companyTableList: [],
      companyTotal: 0,
      companyPageNum: 1,
      companyPageSize: 20,
      selfTableList: [],
      selfTotal: 0,
      selfPageNum: 1,
      selfPageSize: 20,
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
    }
  },
  created() {
    this.currentTab = this.$route.query.is_person ? this.$route.query.is_person + '' : '0'
    this.handleQuery()
  },
  methods: {
    tabClick(val) {
      this.categoryId = ''
      this.currentTab = val
      this.handleReset()
      // if (this.currentTab == '0') {
      //   this.queryForm = this.companyForm
      // } else {
      //   this.queryForm = this.selfForm
      // }
      // this.handleQuery(this.categoryId, 1)
    },
    handleQuery(categoryId, pageNum) {
      this.loading = true
      this.categoryId = categoryId
      let tempNum = this.currentTab == '0' ? this.companyPageNum : this.selfPageNum
      let tempSize = this.currentTab == '0' ? this.companyPageSize : this.selfPageSize
      this.queryForm.createBy = this.queryForm.createBy || null
      queryFileList({
        pageNum: pageNum || tempNum,
        pageSize: tempSize,
        mediaType: 4,
        groupLevel: +this.currentTab,
        groupId: this.categoryId,
        ...this.queryForm
      }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          const { rows, total } = res
          if (this.currentTab == '0') {
            this.companyForm = this.queryForm
            this.companyTableList = rows || []
            this.companyTotal = total || 0
          } else {
            this.selfForm = this.queryForm
            this.selfTableList = rows || []
            this.selfTotal = total || 0
          }
        }
      })
    },
    handleReset() {
      this.queryForm = {
        fileName: '',
        deptId: null,
        createBy: ''
      }
      if (this.currentTab == '0') {
        this.companyForm = this.queryForm
      } else {
        this.selfForm = this.queryForm
      }
      this.handleQuery(this.categoryId, 1)
    },
    handleSizeChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = 1
        this.companyPageSize = val
      } else {
        this.selfPageNum = 1
        this.selfPageSize = val
      }
      this.handleQuery(this.categoryId)
    },
    handleCurrentChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = val
      } else {
        this.selfPageNum = val
      }
      this.handleQuery(this.categoryId)
    },
    //  新增文件
    addTrick() {
      this.$router.push({
        path: 'UploadFile',
        query: {
          is_person: '1'
        },
      })
    },
    // 编辑文件
    updateTrick(scope, is_person) {
      this.$router.push({
        path: 'UploadFile',
        query: {
          id: scope.row.fileId,
          fileInfo: scope.row,
          levelType: this.levelType,
          is_person: is_person
        }
      })
    },
    // 删除文件
    deleteTrick(scope) {
      // this.tableLoading = true;

      this.$confirm('确认删除文件信息?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        let res = ''
        if (this.levelType === '0') {
          res = await deleteFileCorp({ fileId: scope.row.fileId })
        } else {
          res = await deleteFile({ fileId: scope.row.fileId })
        }
        if (res.code === 200) {
          this.$message.success(res.msg || '操作成功')
          this.handleQuery()
        }
      })
    },
    // 查看文件
    checkDetail(scope, is_person) {
      this.$router.push({
        path: 'LookFile',
        query: {
          id: scope.row.fileId,
          fileInfo: scope.row,
          is_person: is_person
        }
      })
    },
    // 分享文件
    shareFile(row) {
      let id = window.globalConfig.SHARE_URL + '/linkFile?id=' + row.fileId //拿到想要复制的值
      let copyInput = document.createElement('input') //创建input元素
      document.body.appendChild(copyInput) //向页面底部追加输入框
      copyInput.setAttribute('value', id) //添加属性，将url赋值给input元素的value属性
      copyInput.select() //选择input元素
      document.execCommand('Copy') //执行复制命令
      this.$message.success('链接已复制！') //弹出提示信息，不同组件可能存在写法不同
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove() //删除动态创建的节点
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
.container {
  height: 100%;
  background: #fff;
  .text-color {
    color: #082aff;
  }
}
</style>
